import React, { PureComponent } from 'react';
import { Upload, Modal, Button, Row, Input, Form, Col, Icon, message, notification, Select } from 'antd';

const uploadProps = {

    multiple: true,
    beforeUpload(file) {
        const isJPG = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
        if (!isJPG) {
            message.error('只能上传Excel文件');
        }
        return isJPG;
    },
    onChange(resp) {
        if (resp.file.response) {
            if (!resp.file.response.success) {
                notification.error({ message: "导入失败", description: resp.file.response.error });
                resp.fileList.splice(resp.fileList.length - 1, 1);
            } else {
                notification.success({ message: "导入成功", description: resp.file.response.result });
            }
        }
    },
};

const UploadContent = () => {
    const sProps1 = {
        action: ``,
        ...uploadProps
    };

    return (
        <div style={{ height: 400 }}>
            <Row style={{ margin: 10 }}>
                <h3>选择要上传的Excel:</h3>
            </Row><Row style={{ margin: 10 }}>
                <Upload {...sProps1}>
                    <Button type="ghost">
                        <Icon type="upload" /> 点击上传
                 </Button>
                </Upload>
            </Row>
        </div>
    );
}



const ObjectDetailContent = (objprops) => {

    const formItemLayout = {
        labelCol: {
            xs: { span: 24 },
            sm: { span: 8 },
        },
        wrapperCol: {
            xs: { span: 24 },
            sm: { span: 16 },
        },
    };


    if (Array.isArray(objprops.objprops)) {
        const arr = objprops.objprops;
        return (
            <Form {...formItemLayout}>
                {arr.map((x, i) =>
                    <Form.Item label={x.title}>
                        <Input />
                    </Form.Item>
                )}
            </Form>
        );
    }

    return (
        <Form {...formItemLayout}>
            <Form.Item label="名称">
                <Input />
            </Form.Item>
        </Form>
    );


}

class deviceImport extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            visible2: false
        };
        this.showModal = this.showModal.bind(this);
        this.showModal2 = this.showModal2.bind(this);
        this.handleOk = this.handleOk.bind(this);
        this.handleCancel = this.handleCancel.bind(this);
    }


    showModal() {
        this.setState({
            visible: true,
        });
    }


    showModal2() {
        this.setState({
            visible2: true,
        });
    }

    handleOk() {
        this.setState({
            visible: false,
            visible2: false
        });
    }

    handleCancel() {
        this.setState({
            visible: false,
            visible2: false
        });
    }


    render() {
       
        const { titleImport, titleAdd, objprops } = this.props;

        let importButton;
        if (titleImport !== undefined) {
            importButton = (
              <Button type="ghost" onClick={this.showModal} style={{ marginRight: 16 }} icon="import">Excel导入</Button>
            );
        }

        return (
            <div>
              {importButton}
              <Modal title={titleImport} visible={this.state.visible}
                onOk={this.handleOk} onCancel={this.handleCancel}
                okText="确定" cancelText="取消" width={600}>
                <UploadContent />
              </Modal>

              {/* <Button type="ghost" onClick={this.showModal2} style={{ marginRight: 16 }} icon="plus">添加</Button>

              <Modal title={titleAdd} visible={this.state.visible2}
                    onOk={this.handleOk} onCancel={this.handleCancel}
                    okText="确定" cancelText="取消" width={600}    >
                    <ObjectDetailContent objprops={objprops} />
              </Modal> */}
            </div>
        );
    }
}

export default deviceImport;
